<template>
  <div class="page-main">
    <home-nav :userData="userinfo"></home-nav>
    <div class="container">
      <div class="head-content">
        <span class="bold-font">合同详情</span>
        <div class="btn-line"></div>
      </div>
      <div class="content">
        <section>
          <div class="section-header">基础信息</div>
          <a-form-model ref="ruleForm">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="合同流水号:">
                  <a-input v-model="contract.serialNumber" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="采购申请号:">
                  <a-input v-model="contract.projectApplySerialNumber" disabled> </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="海顺审批流水号:">
                  <a-input v-model="contract.hsContractFlowNo" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="16">
                <a-form-model-item
                  label="合同名称:"
                >
                  <a-input v-model="contract.contractName" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同编号:">
                  <a-input v-model="contract.contractNumber" disabled />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="合同总额:">
                  <a-input v-model="contract.contractTotalPrice" suffix="元" disabled />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="所属项目名称:">
                  <a-input v-model="contract.projectName" disabled> </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="项目类型:">
                  <a-input v-model="contract.proTypeName" disabled> </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="甲方名称:">
                  <a-input v-model="contract.signCompany" disabled> </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="乙方名称:">
                  <a-input v-model="contract.supplierName" disabled> </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="乙方代表:">
                  <a-input v-model="contract.supplierUserName" disabled> </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="是否补充协议:">
                  <div style="display: flex; justify-content: start">
                    <a-input v-model="contract.isAddAgreement" disabled> </a-input>
                    <a-input v-if="contract.isAddAgreement == '是'" v-model="contract.mainContractNumber" disabled>
                    </a-input>
                  </div>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同类别:">
                  <a-input v-model="contract.categoryCode" disabled> </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同范本选择:">
                  <a-input v-model="contract.standardFileName" disabled> </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="采购方式:">
                  <a-input v-model="contract.purchaseType" disabled> </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同签订方式:">
                  <a-input v-model="contract.contractNature" disabled> </a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="合同跟进专员:">
                  <a-input v-model="contract.createOrderUser" disabled> </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item
                  label="合同签订目的:"
                >
                  <a-input type="textarea" v-model="contract.contractSpecialExplain" disabled> </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </section>
        <section>
          <div class="section-header">合同附件</div>
          <a-tabs @change="changeTabs">
            <a-tab-pane
              v-for="(contract, index) in contracts"
              :key="index"
              :tab="index == 0 ? '主合同' : '补充协议' + index"
            >
              <a-table :columns="columns" :data-source="attachs" rowKey="id" bordered size="middle">
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import Permission from '@/views/workReport/permission/Permission'
import NodeTimeList from '@/views/contract/NodeTimeList'
import InstallmentList from '@/views/contract/InstallmentList'
import AttachList from '@/views/contract/AttachList'
export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    Permission,
    NodeTimeList,
    InstallmentList,
    AttachList,
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractReportInfo',
      },
      urls: {
        loadContract: '/hte/contract/loadContract',
        template: '/workReport/template/info',
        createWoreReport: '/hte/contract/createWoreReport',
        loadContractAttach: '/hte/contract/loadContractAttach',
        loadPurchaseContract: '/hte/contract/loadPurchaseContract',
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      templateId: 5,
      contractId: this.$route.params && this.$route.params.id,
      template: {},
      contract: {},
      showPermission: false,
      contracts: [],
      columns: [
        {
          title: '所属附件名称',
          dataIndex: 'formName',
          key: 'formName',
        },
        {
          title: '文件名称',
          dataIndex:"fileName"
        },
        {
          title: '上传人',
          dataIndex: 'modifyUser',
          key: 'modifyUser',
        },
        ,
        {
          title: '上传时间',
          dataIndex: 'modifyTime',
          key: 'modifyTime',
        },
      ],
      attachs:[]
    }
  },
  computed: {},
  mounted() {
    this.fetchContract()
    this.fetchAttach(this.contractId)
  },
  methods: {
    fetchAttach(contractId) {
      getAction(this.urls.loadContractAttach + '/' + contractId, {}).then((res) => {
        if (res.success) {
          this.attachs = res.result
          this.loadPurchaseContract()
        }
      })
    },
     loadPurchaseContract() {
      getAction(this.urls.loadPurchaseContract + '/' + this.contractId, {}).then((res) => {
        if (res.success) {
          this.contracts = res.result
        }
      })
    },
    fetchContract() {
      getAction(this.urls.loadContract + '/' + this.contractId, {}).then((res) => {
        if (res.success) {
          this.contract = res.result
        }
      })
    },
    changeTabs(key){
      this.fetchAttach(this.contracts[key].id)
    },
    createWoreReport() {
      this.$refs.permissionRef.init()
      this.showPermission = true
    },
    closePermission() {
      this.showPermission = false
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.page-main {
  .container {
    padding: 27px 125px 50px;
    .content {
      margin-top: 20px;
      section {       
        margin-bottom: 18px;
      }
    }
  }
}
</style>